<template>
  <div ref="trendChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  data: Object,
  unit: String
});
const apiData = props.data;
// 横坐标
const xData = apiData.xData;
// 数据处理
const valuePrev = apiData.valuePrev; // 同期
const valueLast = apiData.valueLast; // 本期
let growthRates: number[] = []; // 同比
for (let i = 0; i < valuePrev.length; i++) {
  // 确保 valuePrev 中的值不为 0，避免除以零的错误
  if (valuePrev[i] !== 0) {
    let growthRate = (((valueLast[i] - valuePrev[i]) / valuePrev[i]) * 100).toFixed(2);
    growthRates.push(growthRate);
  } else {
    // 如果 arr1 的元素为 0，可以将其对应的增长设置为 null 或其他占位符
    // 在 TypeScript 中，我们可以使用 union 类型来表示这种情况
    growthRates.push(null as number | null);
  }
}
// 颜色和单位
const colors = apiData.color; // 颜色
const barWidth = apiData.barWidth; // 单位
const unit = apiData.unit; // 单位

// 图表绘制逻辑
const trendChartRef = ref<HTMLDivElement | null>(null);
const trendChartRefInstance = ref<echarts.ECharts | null>(null);
const initTrendOption = ref<echarts.EChartOption>({});

const color: string[] = [
  "#00ffff",
  "#409B5C",
  "#006ced",
  "#ffe000",
  "#ffa800",
  "#ff5b00",
  "#ff3000"
];
let toolTimer = ref<any>(null);

initTrendOption.value = {
  // backgroundColor: "#061740",
  title: {
    show: true,
    text: `单位(${unit})`,
    // text: unit,
    left: 2,
    textStyle: {
      fontSize: 12,
      color: "rgba(0,0,0,0.6)"
    }
  },
  tooltip: {
    backgroundColor: "rgba(13, 64, 71, 0.65)",
    borderColor: "rgba(143, 225, 252, 0.65)",
    padding: 8,
    textStyle: {
      color: "#ffffff"
    }
  },
  legend: {
    show: false,
    data: ["本期", "同期"],
    icon: "circle",
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 10,
    top: 0,
    right: "center",
    textStyle: {
      fontSize: 12,
      lineHeight: 12,
      color: "rgba(0,0,0,0.6)"
    }
  },
  grid: {
    top: "10%",
    left: "2%",
    right: "2%",
    bottom: "0%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: xData,
      axisPointer: {
        type: "shadow"
      },
      axisLabel: {
        textStyle: {
          color: "rgba(0,0,0,0.6)", //更改坐标轴文字颜色
          fontSize: 12 //更改坐标轴文字大小
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        textStyle: {
          color: "rgba(0,0,0,0.6)", //更改坐标轴文字颜色
          fontSize: 12 //更改坐标轴文字大小
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(215,215,215,0.3)",
          type: [5, 10]
        }
      }
    }
  ],
  series: [
    {
      name: "本期",
      type: "bar",
      smooth: true,
      barWidth: barWidth,
      itemStyle: {
        opacity: 1, // 这个是 透明度
        color: new echarts.graphic.LinearGradient(
          0,
          1,
          0,
          0,
          [
            {
              offset: 0,
              color: colors[0][0] // 0% 处的颜色
            },
            {
              offset: 1,
              color: colors[0][1] // 100% 处的颜色
            }
          ],
          false
        )
      },
      // 实现数字展示在柱状图
      label: {
        show: true,
        // position: "trend",
        position: "inside",
        fontSize: 10,
        color: "rgba(0,0,0,0.6)",
        offset: [0, -10],
        formatter: "{c}" //添加单位
      },
      data: valuePrev
    },
    {
      name: "同期",
      type: "bar",
      smooth: true,
      barWidth: barWidth,
      itemStyle: {
        // lenged文本
        opacity: 1, // 这个是 透明度
        color: new echarts.graphic.LinearGradient(
          0,
          1,
          0,
          0,
          [
            {
              offset: 0,
              color: colors[1][0] // 0% 处的颜色
            },
            {
              offset: 1,
              color: colors[1][1] // 100% 处的颜色
            }
          ],
          false
        )
      },
      label: {
        show: true,
        // position: "trend",
        position: "inside",
        fontSize: 10,
        color: "rgba(0,0,0,0.6)",
        offset: [0, 10],
        formatter: "{c}" //添加单位
      },
      data: valueLast
    }
  ]
};

const initTrendChart = () => {
  if (trendChartRef.value) {
    trendChartRefInstance.value = markRaw(echarts.init(trendChartRef.value));
    trendChartRefInstance.value.setOption(initTrendOption.value, true);
  }
};

// tooltip自动轮播 若使用请做销毁处理
// if (initTrendOption.value && typeof initTrendOption.value === "object") {
//   let index = 0;
//   toolTimer.value = setInterval(function () {
//     trendChartRefInstance.value.dispatchAction({
//       type: "showTip",
//       seriesIndex: 0,
//       dataIndex: index
//     });
//     index++;
//     if (index >= 7) {
//       index = 0;
//     }
//   }, 3000);
// }

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initTrendChart();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (trendChartRefInstance.value) {
      trendChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (trendChartRefInstance.value) {
    trendChartRefInstance.value.dispose();
  }
  if (toolTimer.value) {
    clearInterval(toolTimer.value);
  }
});
</script>

<style scoped lang="scss"></style>
